<template>
  <el-dialog
    :before-close="toggleDialog"
    v-model="store.state.cinemaView.dialogFormVisible"
    title="编辑影院信息"
  >
    <el-form :model="store.state.cinemaView.listdata" :label-width="formLabelWidth">
      <el-form-item label="电影名" prop="name">
        <el-input v-model="store.state.cinemaView.listdata.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机" prop="date">
        <el-input v-model="store.state.cinemaView.listdata.date" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="store.state.cinemaView.listdata.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handelsubmit">取消</el-button>
        <el-button type="primary" @click="toggleDialog">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import http from '@/util/api';
import { List } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import {
  onMounted, onUnmounted, reactive, ref,
} from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
const form = reactive({
  name: '',
  phone: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
});

//   onUnmounted(()=>{
//     toggleDialog(0)
// })
const emit = defineEmits(['getlist']);
// 确定
const toggleDialog = () => {
  http(`/cinema/${store.state.cinemaView.listdata.id}`, 'put', store.state.cinemaView.listdata).then(
    (res: any) => {
      if (res.status === 200) {
        ElMessage({
          type: 'success',
          message: '修改成功！',
        });
        console.log(res);
        emit('getlist');
      } else {
        ElMessage({
          type: 'error',
          message: '修改失败！',
        });
      }
      store.commit('SET_DIALOG');
    },
  );
};
const handelsubmit = () => {
  store.commit('SET_DIALOG');
  ElMessage({
    type: 'info',
    message: '已取消！',
  });
};

onMounted(() => {
  store.commit('SET_DIALOGFalse');
});
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
/* .el-input {
   width: 300px;
 } */
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
